<template>
  <div>

    <button class="m_40" @click="change">改变</button>
    <span class="m_40">{{nav}}</span>
    <span class="m_40">{{bar}}</span>

    <span class="m_40">{{'x'+x}}</span>
    <span class="m_40 ">{{'y'+y}}</span>
    <!-- <div class="p_40 bc_1a wth_200r hei_200r songhua" :style="{ transform: `translate(${x }px, ${y}px)` }">
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { toRef,reactive,toRefs,toRaw} from 'vue'

function scwz(){
  const wz = reactive({
    x: 0,
    y: 0
  })

  wz.x = 1
  wz.y = 1
  const onMouseMove = (event: { pageX: number; pageY: number; }) => {
    // console.log(event);
    wz.x = event.pageX-140
    wz.y = event.pageY - 400
  }
  window.addEventListener('mousemove', onMouseMove)

  return toRefs(wz)
}
console.log(scwz());

let { x, y } = scwz()
let obj = reactive({
  nav: 1,
  bar: 1
})
// let {nav,bar} = toRefs(obj)
let { nav, bar } = toRaw(obj)
let state = toRef(obj,'bar')//前面是对象 后面是需要改变的值 改变单一键值对
const change = ()=>{
//   state.value++
//   console.log('原对象',obj);
//  console.log('新值',state);
  bar++
  nav++
 console.log('原对象',obj);
}

</script>
<style scoped lang='less'>

.songhua{
  transform: translate();
}
</style>